ExtJS Form এবং Form Validation

Web Development - এক্সটিজেএস (ExtJS) -

ExtJS একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। Forms এবং Form Validation ExtJS এর গুরুত্বপূর্ণ অংশ, যেগুলি অ্যাপ্লিকেশনের ইনপুট ডেটা সংগ্রহ এবং যাচাইকরণের জন্য ব্যবহৃত হয়। Forms সাধারণত ব্যবহারকারীর ইনপুট নেওয়ার জন্য ব্যবহৃত হয় এবং Form Validation নিশ্চিত করে যে ইনপুট ডেটা সঠিক, পূর্ণাঙ্গ এবং ভ্যালিড।


ExtJS Form

ExtJS Form হল একটি UI কম্পোনেন্ট যা বিভিন্ন ইনপুট ফিল্ড (যেমন: টেক্সট ফিল্ড, চেকবক্স, রেডিও বাটন, কম্বো বক্স) ধারণ করে, যা ব্যবহারকারীর ইনপুট গ্রহণ করে। ফর্মটি সাধারণত Ext.form.Panel কম্পোনেন্টের মাধ্যমে তৈরি করা হয়।

Form উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'User Registration',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'textfield',
            name: 'firstName',
            fieldLabel: 'First Name',
            allowBlank: false // এই ফিল্ডটি ফাঁকা থাকতে পারবে না
        },
        {
            xtype: 'textfield',
            name: 'lastName',
            fieldLabel: 'Last Name',
            allowBlank: false
        },
        {
            xtype: 'emailfield',
            name: 'email',
            fieldLabel: 'Email',
            vtype: 'email', // ভ্যালিড ইমেইল ফরম্যাট চেক করা হবে
            allowBlank: false
        },
        {
            xtype: 'textfield',
            name: 'phone',
            fieldLabel: 'Phone',
            allowBlank: true // এই ফিল্ডটি ফাঁকা থাকতে পারে
        }
    ],
    buttons: [
        {
            text: 'Submit',
            formBind: true, // ফর্মের ফিল্ডগুলো পূর্ণ হলে সাবমিট হবে
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    Ext.Msg.alert('Success', 'Form is valid!');
                } else {
                    Ext.Msg.alert('Error', 'Form contains invalid data');
                }
            }
        }
    ]
});

উদাহরণ ব্যাখ্যা:

  • xtype: 'textfield': একটি সাধারণ টেক্সট ইনপুট ফিল্ড।
  • name: ইনপুট ফিল্ডের নাম, যা ডেটা সাপোর্ট করে।
  • fieldLabel: ইনপুট ফিল্ডের লেবেল।
  • allowBlank: এই ফিল্ডটি ফাঁকা থাকতে পারবে কিনা।
  • vtype: ভ্যালিডেশন টাইপ, যেমন এখানে ইমেইল ইনপুট ফিল্ডে সঠিক ইমেইল ফরম্যাট যাচাই করা হচ্ছে।
  • formBind: সাবমিট বাটনটি শুধুমাত্র তখনই সক্রিয় হবে যখন ফর্মটি সঠিকভাবে পূর্ণ হবে।

ExtJS Form Validation

Form Validation হল একটি প্রক্রিয়া যা ব্যবহারকারীর ইনপুট যাচাই করে নিশ্চিত করে যে এটি সঠিক, পূর্ণ এবং ভ্যালিড। ExtJS ফর্মে বিভিন্ন ধরনের ভ্যালিডেশন অপশন রয়েছে, যেমন required fields, email validation, length validation, range validation, custom validation ইত্যাদি।

১. Required Field Validation

যেকোনো ফিল্ডের জন্য যদি Required Validation করতে হয়, তাহলে allowBlank: false ব্যবহার করা হয়।

{
    xtype: 'textfield',
    name: 'username',
    fieldLabel: 'Username',
    allowBlank: false // এই ফিল্ডটি খালি রাখা যাবে না
}

২. Email Validation

ইমেইল ফিল্ডে সঠিক ইমেইল ফরম্যাট চেক করতে vtype ব্যবহার করা হয়।

{
    xtype: 'emailfield',
    name: 'email',
    fieldLabel: 'Email',
    vtype: 'email', // ইমেইল ফরম্যাট যাচাই
    allowBlank: false
}

৩. Length Validation

Length Validation ব্যবহারকারী ইনপুটের দৈর্ঘ্য নির্ধারণ করতে ব্যবহার করা হয়।

{
    xtype: 'textfield',
    name: 'password',
    fieldLabel: 'Password',
    minLength: 6,  // ন্যূনতম ৬টি ক্যারেক্টার
    maxLength: 20, // সর্বোচ্চ ২০টি ক্যারেক্টার
    allowBlank: false
}

৪. Range Validation

একটি ইনপুট ফিল্ডের জন্য একটি নির্দিষ্ট মানের পরিসীমা যাচাই করতে minValue এবং maxValue ব্যবহার করা হয়।

{
    xtype: 'numberfield',
    name: 'age',
    fieldLabel: 'Age',
    minValue: 18, // সর্বনিম্ন বয়স ১৮
    maxValue: 100, // সর্বোচ্চ বয়স ১০০
    allowBlank: false
}

৫. Custom Validation

এছাড়াও custom validation ফাংশন ব্যবহার করে নিজস্ব ভ্যালিডেশন লজিক তৈরি করা যেতে পারে।

{
    xtype: 'textfield',
    name: 'username',
    fieldLabel: 'Username',
    allowBlank: false,
    validator: function(value) {
        return /^[a-zA-Z0-9]+$/.test(value) ? true : 'Username must be alphanumeric.';
    }
}

এখানে, validator ফাংশন একটি কাস্টম নিয়ম প্রয়োগ করেছে যা নিশ্চিত করে যে username শুধুমাত্র অক্ষর এবং নম্বর থাকতে পারে।


Form Validation এর গুরুত্বপূর্ণ বৈশিষ্ট্য

  1. allowBlank: যদি false সেট করা হয়, তাহলে ফিল্ডটি ফাঁকা থাকতে পারবে না।
  2. vtype: নির্দিষ্ট ইনপুট ফিল্ডের জন্য বিল্ট-ইন ভ্যালিডেশন (যেমন ইমেইল, URL)।
  3. minLength এবং maxLength: ইনপুটের দৈর্ঘ্য সীমাবদ্ধ করার জন্য।
  4. minValue এবং maxValue: ইনপুটের মান সীমাবদ্ধ করার জন্য (যেমন বয়স, মুল্য)।
  5. validator: কাস্টম ভ্যালিডেশন ফাংশন তৈরি করতে।

Form Submission

ফর্মটি সাবমিট করার আগে, isValid() মেথড ব্যবহার করে ফর্মের ভ্যালিডেশন চেক করা হয়। যদি ফর্মটি ভ্যালিড হয়, তাহলে সাবমিট করা হয়, অন্যথায় ইউজারকে একটি মেসেজ প্রদর্শন করা হয়।

var form = this.up('form').getForm();
if (form.isValid()) {
    form.submit({
        url: 'submitForm.php', // ফর্ম সাবমিট করার URL
        success: function(form, action) {
            Ext.Msg.alert('Success', 'Form submitted successfully!');
        },
        failure: function(form, action) {
            Ext.Msg.alert('Failed', 'Form submission failed.');
        }
    });
} else {
    Ext.Msg.alert('Invalid', 'Please fix the errors in the form.');
}

সারাংশ

  • ExtJS Form ব্যবহারকারীর ইনপুট সংগ্রহ করার জন্য একটি শক্তিশালী কম্পোনেন্ট, যা বিভিন্ন ধরনের ইনপুট ফিল্ড (যেমন টেক্সট, নাম, ইমেইল) প্রদান করে।
  • Form Validation নিশ্চিত করে যে ব্যবহারকারীর ইনপুট সঠিক এবং পূর্ণাঙ্গ। ExtJS তে ফর্ম ভ্যালিডেশন সহজে কাস্টমাইজ করা যায়, যেমন প্রয়োজনীয় ফিল্ড, ইমেইল ফরম্যাট, দৈর্ঘ্য বা মানের পরিসীমা।
  • ফর্মটি ভ্যালিড হলে ডেটা submit করা হয় এবং যেকোনো ভ্যালিডেশন সমস্যা থাকলে, ব্যবহারকারীকে সতর্কতা প্রদান করা হয়।

ExtJS এর ফর্ম এবং ফর্ম ভ্যালিডেশন ব্যবস্থা ব্যবহার করে আপনি একটি নিরাপদ এবং ব্যবহারকারী বান্ধব অ্যাপ্লিকেশন তৈরি করতে পারবেন।

Content added By

Form Panel তৈরি এবং কনফিগার করা

ExtJS তে Form Panel একটি খুবই গুরুত্বপূর্ণ UI কম্পোনেন্ট, যা ব্যবহারকারীদের ইনপুট নেওয়ার জন্য ব্যবহৃত হয়। এটি বিভিন্ন ধরনের ফর্ম ফিল্ড (যেমন, টেক্সটফিল্ড, রেডিও বাটন, চেকবক্স, ড্রপডাউন ইত্যাদি) ধারণ করে এবং ডেটা সাবমিট করার জন্য ব্যবহৃত হয়। Form Panel সঠিকভাবে কনফিগার করলে ইউজারের ইনপুট প্রক্রিয়া সহজ এবং ইন্টারেক্টিভ হয়।


Form Panel কী?

Form Panel ExtJS এ একটি কনটেইনার প্যানেল, যা ফর্ম ইনপুট ফিল্ড, সাবমিট বাটন, এবং ইনপুট ভ্যালিডেশন কনফিগারেশন ধারণ করে। এটি সাধারণত বিভিন্ন ইনপুট ফিল্ড যেমন টেক্সটফিল্ড, রেডিও বাটন, ড্রপডাউন লিস্ট এবং বাটন ইত্যাদির মাধ্যমে ব্যবহারকারীর ডেটা সংগ্রহ করে।

Form Panel তৈরি করার উপায়

এখানে Ext.form.Panel কনফিগারেশনের মাধ্যমে একটি বেসিক Form Panel তৈরি করা হবে।


১. Form Panel তৈরি করা

Form Panel তৈরি করার জন্য প্রথমে একটি প্যানেল তৈরি করতে হবে এবং তারপর তার মধ্যে ফর্ম ইনপুট ফিল্ড যুক্ত করতে হবে।

উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'User Registration Form',
    width: 350,
    bodyPadding: 10,  // ফর্মের চারপাশে প্যাডিং
    renderTo: Ext.getBody(),  // DOM এ রেন্ডার করা
    items: [
        {
            xtype: 'textfield',  // টেক্সটফিল্ড ইনপুট
            name: 'username',  // ইনপুট ফিল্ডের নাম
            fieldLabel: 'Username',  // লেবেল
            allowBlank: false,  // ইনপুট ফিল্ডটি খালি থাকতে পারবে না
            labelAlign: 'top'  // লেবেল উপরে থাকবে
        },
        {
            xtype: 'textfield',
            name: 'email',
            fieldLabel: 'Email',
            vtype: 'email',  // ভ্যালিডেশন: ইমেল ফর্ম্যাট চেক
            allowBlank: false,
            labelAlign: 'top'
        },
        {
            xtype: 'textfield',
            name: 'password',
            fieldLabel: 'Password',
            inputType: 'password',  // পাসওয়ার্ড ইনপুট ফিল্ড
            allowBlank: false,
            labelAlign: 'top'
        },
        {
            xtype: 'checkbox',  // চেকবক্স ইনপুট
            name: 'agreeTerms',
            fieldLabel: 'I agree to the terms and conditions',
            inputValue: '1',  // চেক করা থাকলে মান হবে 1
            uncheckedValue: '0'  // চেক না থাকলে মান হবে 0
        }
    ],
    buttons: [
        {
            text: 'Submit',
            handler: function() {
                var form = this.up('form').getForm();  // ফর্মের ডেটা সংগ্রহ করা
                if (form.isValid()) {
                    console.log(form.getValues());  // ফর্মের মান কনসোল আউটপুটে দেখানো
                } else {
                    Ext.Msg.alert('Invalid', 'Please fill in the required fields!');
                }
            }
        }
    ]
});

এই উদাহরণে ব্যবহৃত কিছু কনফিগারেশন:

  1. xtype: এটি কম্পোনেন্টের ধরনের নাম। textfield এর মাধ্যমে আমরা ইনপুট ফিল্ড তৈরি করেছি।
  2. name: ফর্ম ফিল্ডের নাম, যা সাবমিটের সময় ব্যবহৃত হবে।
  3. fieldLabel: ফিল্ডের লেবেল যা ইউজারের কাছে দেখানো হবে।
  4. allowBlank: এটি নির্দেশ করে যে, ফিল্ডটি খালি থাকতে পারে কিনা। এখানে false দিলে ফিল্ডটি খালি থাকতে পারবে না।
  5. inputType: পাসওয়ার্ড ইনপুটের জন্য password ব্যবহার করা হয়েছে যাতে ইনপুটটি গোপন থাকে।
  6. vtype: ভ্যালিডেশন টাইপ, যেমন এখানে email দিয়ে ইমেল ফিল্ডের জন্য ভ্যালিডেশন দেয়া হয়েছে।
  7. buttons: ফর্মের নিচে একটি সাবমিট বাটন তৈরি করা হয়েছে। বাটনে ক্লিক করলে, ফর্মটি সঠিকভাবে পূর্ণ হলে ইনপুট ডেটা কনসোল আউটপুটে প্রদর্শিত হবে।

২. ফর্মের ডেটা সাবমিট করা

ফর্মের ডেটা সঠিকভাবে সাবমিট করার জন্য ফর্মের getForm() মেথড ব্যবহার করা হয়। এটি ফর্মের ডেটা রিট্রিভ করে এবং ডেটা সাবমিট করতে সহায়ক।

উদাহরণ:

handler: function() {
    var form = this.up('form').getForm();  // ফর্মের ডেটা সংগ্রহ করা
    if (form.isValid()) {  // ফর্ম ভ্যালিড হলে
        console.log(form.getValues());  // ফর্মের ডেটা কনসোল আউটপুটে দেখানো
    } else {
        Ext.Msg.alert('Invalid', 'Please fill in the required fields!');  // যদি ফর্ম ইনভ্যালিড হয়
    }
}
  • isValid(): ফর্মের সমস্ত ইনপুট ফিল্ড ভ্যালিডেশন চেক করে, এবং যদি সব ইনপুট ভ্যালিড হয় তবে true রিটার্ন করবে।
  • getValues(): এটি ফর্মের সমস্ত ফিল্ডের মান সংগ্রহ করে এবং একটি অবজেক্ট হিসেবে রিটার্ন করে।

৩. ফর্ম ভ্যালিডেশন

ExtJS তে ফর্মের ইনপুট ভ্যালিডেশন সহজে করা যায়। এর জন্য বিভিন্ন প্রপার্টি এবং ভ্যালিডেশন মেথড ব্যবহার করা হয়।

কিছু সাধারণ ভ্যালিডেশন:

  • allowBlank: এই প্রপার্টি দ্বারা একটি ফিল্ড খালি থাকতে পারবে কি না তা নির্ধারণ করা হয়।
  • vtype: ভ্যালিডেশন টাইপ নির্ধারণ করে (যেমন, email, url, alphanum ইত্যাদি)।
  • minLength এবং maxLength: ইনপুটের দৈর্ঘ্য নির্ধারণ করে।
  • regex: কাস্টম ভ্যালিডেশন রেগুলার এক্সপ্রেশন ব্যবহার করে।

উদাহরণ:

{
    xtype: 'textfield',
    name: 'phone',
    fieldLabel: 'Phone Number',
    regex: /^[0-9]{10}$/,  // ফোন নম্বরের জন্য কাস্টম রেগুলার এক্সপ্রেশন
    allowBlank: false
}

সারাংশ

ExtJS তে Form Panel তৈরি এবং কনফিগার করা খুবই সহজ এবং শক্তিশালী। এটি বিভিন্ন ফর্ম ইনপুট ফিল্ড এবং সাবমিট বাটন সমন্বিত করে ডেটা সংগ্রহের প্রক্রিয়াকে সহজ করে তোলে। Form Panel এর সাহায্যে আপনি:

  • ইউজারের ইনপুট গ্রহণ করতে পারেন।
  • ডেটা ভ্যালিডেশন করতে পারেন।
  • ডেটা রিট্রিভ এবং সাবমিট করতে পারেন।

ExtJS এর Form Panel কনফিগারেশন এবং বৈশিষ্ট্যগুলি ব্যবহার করে আপনি শক্তিশালী এবং ইন্টারেক্টিভ ফর্ম তৈরি করতে পারবেন যা ব্যবহারকারীর জন্য সহজ ও সুবিধাজনক হবে।

Content added By

ফর্ম উইজেটসমূহ (TextField, ComboBox, DateField)

ExtJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা ফর্ম ডিজাইন এবং ফর্মের বিভিন্ন উপাদান (উইজেট) সহজভাবে তৈরি এবং পরিচালনা করতে সহায়তা করে। এক্সটিজেএসে TextField, ComboBox, এবং DateField সহ বিভিন্ন ফর্ম উইজেট ব্যবহৃত হয় যা ইউজার ইন্টারফেসে তথ্য গ্রহণ করতে সাহায্য করে। এই উইজেটগুলো ফর্মের অন্যতম গুরুত্বপূর্ণ অংশ এবং ডেটা সংগ্রহের ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে।


১. TextField

TextField এক্সটিজেএস এর সবচেয়ে মৌলিক ইনপুট উইজেট যা ব্যবহারকারীর কাছ থেকে টেক্সট ডেটা গ্রহণ করতে ব্যবহৃত হয়। এটি সাধারণত ব্যবহারকারীর নাম, ইমেল, অথবা অন্য কোনও স্ট্রিং ইনপুটের জন্য ব্যবহৃত হয়।

TextField উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'TextField Example',
    width: 400,
    height: 200,
    bodyPadding: 10,
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: 'Username',
        allowBlank: false  // এটি ইনপুট ফিল্ডের জন্য বাধ্যতামূলক হবে
    }],
    renderTo: Ext.getBody()
});
  • xtype: 'textfield' ইনপুট ফিল্ড তৈরি করে।
  • fieldLabel: ফিল্ডের লেবেল।
  • allowBlank: যদি false থাকে, তবে এটি ইনপুট ফিল্ডের জন্য বাধ্যতামূলক হবে।

TextField কনফিগারেশন:

  • inputType: ইমেইল, পাসওয়ার্ড বা টেলিফোনের মতো বিভিন্ন ইনপুট টাইপ নির্ধারণ করা যায়।
  • regex: ইনপুট ভ্যালিডেশন জন্য রেগুলার এক্সপ্রেশন ব্যবহার করা যায়।
xtype: 'textfield',
inputType: 'password',  // পাসওয়ার্ড ইনপুটের জন্য
regex: /^[a-zA-Z0-9]+$/,  // কেবলমাত্র অক্ষর এবং সংখ্যা গ্রহণযোগ্য

২. ComboBox

ComboBox হল একটি ড্রপডাউন ইনপুট ফিল্ড, যা ব্যবহারকারীকে একটি নির্দিষ্ট তালিকা থেকে একটি মান নির্বাচন করতে দেয়। এটি সাধারণত পছন্দের তালিকা বা দেশ নির্বাচন করার জন্য ব্যবহৃত হয়।

ComboBox উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'ComboBox Example',
    width: 400,
    height: 200,
    bodyPadding: 10,
    items: [{
        xtype: 'combo',
        name: 'country',
        fieldLabel: 'Select Country',
        store: ['USA', 'Canada', 'UK', 'India'],  // স্টোরের মাধ্যমে দেশগুলির তালিকা
        allowBlank: false,  // এটি বাধ্যতামূলক হবে
        queryMode: 'local',  // ডেটা লোকাল ভাবে লোড করা
        displayField: 'name',  // প্রদর্শিত ফিল্ড
        valueField: 'code'   // মানের ফিল্ড
    }],
    renderTo: Ext.getBody()
});
  • xtype: 'combo' ড্রপডাউন নির্বাচন ফিল্ড তৈরি করে।
  • store: ComboBox এর ডেটা উৎস।
  • queryMode: 'local' হলে ডেটা ক্লায়েন্ট সাইডে থেকে লোড হবে।
  • displayField: ComboBox তে কোন ফিল্ডটি প্রদর্শিত হবে তা নির্ধারণ করে।
  • valueField: ComboBox তে কোন ফিল্ডের মানকে নির্বাচিত করা হবে তা নির্ধারণ করে।

ComboBox কনফিগারেশন:

  • forceSelection: যদি true থাকে, তবে ব্যবহারকারী শুধুমাত্র স্টোরের তালিকা থেকে নির্বাচন করতে পারবেন।
  • typeAhead: যদি true থাকে, তবে তালিকায় টাইপ করা মানের সঙ্গে মেলে এমন আইটেমটি স্বয়ংক্রিয়ভাবে নির্বাচন হবে।
forceSelection: true,
typeAhead: true

৩. DateField

DateField একটি ইনপুট ফিল্ড যা ব্যবহারকারীর কাছ থেকে একটি তারিখ গ্রহণ করতে ব্যবহৃত হয়। এটি সাধারণত জন্মতারিখ, রেজিস্ট্রেশন তারিখ ইত্যাদির জন্য ব্যবহৃত হয়।

DateField উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'DateField Example',
    width: 400,
    height: 200,
    bodyPadding: 10,
    items: [{
        xtype: 'datefield',
        name: 'birthdate',
        fieldLabel: 'Date of Birth',
        allowBlank: false,  // বাধ্যতামূলক
        format: 'm/d/Y'  // তারিখ ফরম্যাট
    }],
    renderTo: Ext.getBody()
});
  • xtype: 'datefield' ব্যবহার করে তারিখ ইনপুট ফিল্ড তৈরি হয়।
  • fieldLabel: ইনপুট ফিল্ডের লেবেল।
  • allowBlank: যদি false থাকে, এটি বাধ্যতামূলক হবে।
  • format: তারিখ প্রদর্শন করার ফরম্যাট। উদাহরণ: 'm/d/Y' বা 'Y-m-d'

DateField কনফিগারেশন:

  • minValue: একটি নির্দিষ্ট তারিখের পরবর্তী তারিখ নির্বাচন করার জন্য।
  • maxValue: একটি নির্দিষ্ট তারিখের আগের তারিখ নির্বাচন করার জন্য।
minValue: new Date(2000, 1, 1), // 2000 সালের ১ জানুয়ারি থেকে পরবর্তী তারিখ
maxValue: new Date(2025, 1, 1)  // 2025 সালের ১ জানুয়ারির আগে তারিখ নির্বাচনযোগ্য

সারাংশ

  1. TextField:
    • টেক্সট ডেটা ইনপুট করার জন্য ব্যবহৃত হয়।
    • বিভিন্ন ইনপুট টাইপ (যেমন, পাসওয়ার্ড, ইমেল) নির্ধারণ করা যায়।
  2. ComboBox:
    • একটি ড্রপডাউন লিস্ট থেকে মান নির্বাচন করতে ব্যবহৃত হয়।
    • স্টোর থেকে ডেটা লোড করা যায় এবং তালিকাটি ব্যবহারকারীর জন্য উপলব্ধ করা হয়।
  3. DateField:
    • একটি ক্যালেন্ডার ব্যবহার করে তারিখ নির্বাচন করার জন্য ব্যবহৃত হয়।
    • বিভিন্ন তারিখ ফরম্যাট এবং সীমা নির্ধারণ করা যায়।

এই ফর্ম উইজেটগুলো ব্যবহার করে আপনি শক্তিশালী, ব্যবহারকারী-বান্ধব এবং কার্যকরী ফর্ম তৈরি করতে পারবেন যা আপনার অ্যাপ্লিকেশনে তথ্য সংগ্রহ এবং প্রসেসিং সহজ করে তুলবে।

Content added By

ফর্মের মাধ্যমে Data Submission এবং ফর্ম ভ্যালিডেশন

ExtJS তে ফর্ম তৈরি করা এবং সেগুলির মাধ্যমে ডেটা সাবমিট (submit) করা একটি সাধারণ কাজ, যা বিভিন্ন ফর্ম ফিল্ড এবং ভ্যালিডেশন চেক করার মাধ্যমে ব্যবহারকারীর ইনপুট সংগ্রহ করতে সহায়ক। ExtJS এর Ext.form.Panel এবং Ext.form.field কম্পোনেন্ট ব্যবহার করে খুব সহজে ফর্ম তৈরি এবং ডেটা সাবমিট করা যায়। এছাড়াও, ফর্ম ভ্যালিডেশন নিশ্চিত করার জন্য ExtJS শক্তিশালী মেকানিজম প্রদান করে।


১. ফর্ম তৈরি করা (Ext.form.Panel)

প্রথমে, একটি সাধারণ ফর্ম তৈরি করা যাক যেখানে ব্যবহারকারী নাম এবং ইমেইল ইনপুট করবে। ফর্মটি সাবমিট করার সময় আমরা ডেটা সার্ভারে পাঠাবো।

উদাহরণ: একটি সাধারণ ফর্ম

Ext.create('Ext.form.Panel', {
    title: 'User Information Form',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'textfield',
            name: 'name',
            fieldLabel: 'Name',
            allowBlank: false,  // নাম ফিল্ড ফাঁকা রাখা যাবে না
            minLength: 3,       // কমপক্ষে ৩ অক্ষর
            maxLength: 50       // সর্বোচ্চ ৫০ অক্ষর
        },
        {
            xtype: 'textfield',
            name: 'email',
            fieldLabel: 'Email',
            vtype: 'email',  // ইমেইল ভ্যালিডেশন
            allowBlank: false
        }
    ],
    buttons: [
        {
            text: 'Submit',
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    form.submit({
                        url: '/submit',  // ফর্মের ডেটা কোথায় পাঠানো হবে
                        method: 'POST',
                        success: function(form, action) {
                            Ext.Msg.alert('Success', 'Form submitted successfully.');
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('Failed', 'Form submission failed.');
                        }
                    });
                } else {
                    Ext.Msg.alert('Invalid', 'Please correct the errors in the form.');
                }
            }
        }
    ]
});

এখানে:

  • xtype: 'textfield': এটি একটি টেক্সট ইনপুট ফিল্ড তৈরি করবে।
  • allowBlank: false: এটি নিশ্চিত করবে যে, ইনপুট ফিল্ডটি ফাঁকা থাকা যাবে না।
  • minLength এবং maxLength: ইনপুটের দৈর্ঘ্য সীমাবদ্ধ করতে ব্যবহৃত হয়।
  • vtype: 'email': ইমেইল ফিল্ডের জন্য একটি বিল্ট-ইন ভ্যালিডেশন।
  • form.submit: ফর্মের ডেটা সাবমিট করতে ব্যবহৃত হয়, এখানে একটি POST রিকোয়েস্ট সার্ভারে পাঠানো হবে।

২. ফর্ম ভ্যালিডেশন (Form Validation)

ফর্ম ভ্যালিডেশন ব্যবহারকারীর ইনপুট যাচাই করার একটি প্রক্রিয়া। ExtJS তে বিভিন্ন ধরনের বিল্ট-ইন ফর্ম ভ্যালিডেশন রয়েছে যা ফিল্ডের ইনপুট চেক করতে ব্যবহৃত হয়।

ফর্ম ভ্যালিডেশন উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'Registration Form',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false,  // ইনপুট ফিল্ড ফাঁকা রাখা যাবে না
            minLength: 3,       // ইনপুটের দৈর্ঘ্য ৩ অক্ষরের কম হতে পারবে না
            maxLength: 20,      // ইনপুটের দৈর্ঘ্য ২০ অক্ষরের বেশি হতে পারবে না
            regex: /^[a-zA-Z0-9]+$/,  // কেবল alphanumeric চিহ্ন গ্রহণ করবে
            invalidText: 'Username should contain only alphanumeric characters.'
        },
        {
            xtype: 'textfield',
            name: 'password',
            fieldLabel: 'Password',
            inputType: 'password', // পাসওয়ার্ড ফিল্ড তৈরি করবে
            allowBlank: false,
            minLength: 6,          // পাসওয়ার্ডের দৈর্ঘ্য কমপক্ষে ৬
            vtype: 'alphanum',     // পাসওয়ার্ডে অক্ষর এবং সংখ্যা থাকবে
            invalidText: 'Password must be at least 6 characters.'
        },
        {
            xtype: 'textfield',
            name: 'email',
            fieldLabel: 'Email',
            vtype: 'email',  // ইমেইল ভ্যালিডেশন
            allowBlank: false
        }
    ],
    buttons: [
        {
            text: 'Submit',
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    Ext.Msg.alert('Valid', 'The form is valid. Ready to submit.');
                    // এখানে ফর্ম ডেটা সাবমিট করা যাবে
                } else {
                    Ext.Msg.alert('Invalid', 'Please fix the errors in the form.');
                }
            }
        }
    ]
});

এখানে:

  • allowBlank: false: ফিল্ডের জন্য ভ্যালিডেশন নিশ্চিত করা হচ্ছে যে এটি ফাঁকা থাকলে ফর্ম সাবমিট হবে না।
  • minLength, maxLength: দৈর্ঘ্য সীমাবদ্ধ করতে ব্যবহৃত হয়।
  • regex: ব্যবহারকারী একটি নির্দিষ্ট প্যাটার্ন অনুসরণ করতে বাধ্য হয় (যেমন কেবল অক্ষর এবং সংখ্যা)।
  • vtype: 'email': ইমেইল ভ্যালিডেশন নিশ্চিত করা।

৩. Custom Validation Function

যদি আপনি কোনো কাস্টম ভ্যালিডেশন চাইতে পারেন, তবে আপনি কাস্টম ভ্যালিডেশন ফাংশন তৈরি করতে পারবেন।

উদাহরণ: কাস্টম ভ্যালিডেশন

Ext.create('Ext.form.Panel', {
    title: 'Custom Validation Form',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'textfield',
            name: 'age',
            fieldLabel: 'Age',
            allowBlank: false,
            validator: function(value) {
                if (value < 18) {
                    return 'Age must be 18 or older';
                }
                return true;  // valid
            }
        }
    ],
    buttons: [
        {
            text: 'Submit',
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    Ext.Msg.alert('Valid', 'Form is valid. Ready to submit.');
                    // এখানে ফর্ম ডেটা সাবমিট করা যাবে
                } else {
                    Ext.Msg.alert('Invalid', 'Please correct the errors in the form.');
                }
            }
        }
    ]
});

এখানে, validator ফাংশন ব্যবহার করে একটি কাস্টম ভ্যালিডেশন যুক্ত করা হয়েছে, যা বয়সের ইনপুটের জন্য ১৮ এর কম হলে ত্রুটি বার্তা দেখাবে।


৪. ফর্ম সাবমিট (Form Submission)

ফর্ম ভ্যালিডেশন সফল হলে আপনি ফর্মের ডেটা AJAX অথবা সার্ভারের মাধ্যমে সাবমিট করতে পারেন। ExtJS এর form.submit() মেথড এটি সম্পন্ন করতে ব্যবহৃত হয়।

ফর্ম সাবমিট উদাহরণ:

form.submit({
    url: '/submit',
    method: 'POST',
    success: function(form, action) {
        Ext.Msg.alert('Success', 'Form submitted successfully');
    },
    failure: function(form, action) {
        Ext.Msg.alert('Failed', 'Form submission failed');
    }
});

এখানে:

  • url: ফর্মের ডেটা কোথায় পাঠানো হবে।
  • method: HTTP মেথড (POST, GET ইত্যাদি) ব্যবহার করা হবে।
  • success এবং failure: ফর্ম সাবমিট সফল হলে অথবা ব্যর্থ হলে কলব্যাক ফাংশন।

সারাংশ

  • Form Panel: ExtJS তে ফর্ম তৈরি করার জন্য Ext.form.Panel ব্যবহার করা হয়, যেখানে বিভিন্ন ফর্ম ফিল্ড যেমন textfield, datefield, checkbox ইত্যাদি থাকে।
  • Validation: ফর্মের ইনপুট ভ্যালিডেশন করার জন্য allowBlank, minLength, regex, vtype, এবং কাস্টম ভ্যালিডেশন ফাংশন ব্যবহার করা যায়।
  • Form Submission: ফর্ম সাবমিট করার জন্য form.submit() মেথড ব্যবহার করা হয়, যা AJAX বা HTTP মেথডের মাধ্যমে ডেটা সার্ভারে পাঠায়।

এই বৈশিষ্ট্যগুলোর মাধ্যমে আপনি একটি পূর্ণাঙ্গ এবং ব্যবহারকারী-বান্ধব ফর্ম তৈরি করতে পারবেন।

Content added By

Client-side এবং Server-side Validation

Validation হল ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ, যা নিশ্চিত করে যে ব্যবহারকারী শুধুমাত্র সঠিক তথ্য প্রদান করছে। ExtJS তে client-side validation এবং server-side validation দুটি ব্যবহৃত হয়, যেখানে client-side validation ব্যবহারকারীর ইনপুট ফর্মের আগে চেক করা হয় এবং server-side validation সার্ভার সাইডে ইনপুট যাচাই করা হয়। দুটোই নিরাপত্তা এবং ডেটার স্বচ্ছতা বজায় রাখার জন্য অপরিহার্য।


১. Client-side Validation

Client-side validation হল ফর্মের ইনপুট ডেটা যাচাই করার একটি প্রক্রিয়া যা ক্লায়েন্ট (ব্যবহারকারী) এর সিস্টেমে রান করে, সার্ভারের আগে। এটি সাধারণত দ্রুত ইনপুট যাচাই করার জন্য ব্যবহৃত হয় এবং ব্যবহারকারীদের দ্রুত প্রতিক্রিয়া প্রদান করে। ExtJS ফ্রেমওয়ার্কে Ext.form.field (যেমন Ext.form.field.Text, Ext.form.field.Number, ইত্যাদি) এর মাধ্যমে ফিল্ড ভ্যালিডেশন করা হয়।

Client-side Validation এর উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'Login Form',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false, // ফিল্ডটি খালি না রাখার জন্য
            minLength: 3, // মিনি দৈর্ঘ্য ৩
            maxLength: 20, // ম্যাক্স দৈর্ঘ্য ২০
            vtype: 'email' // ইমেইল ভ্যালিডেশন
        },
        {
            xtype: 'textfield',
            name: 'password',
            fieldLabel: 'Password',
            inputType: 'password',
            allowBlank: false, // ফিল্ডটি খালি না রাখার জন্য
            minLength: 6 // পাসওয়ার্ডের মিনি দৈর্ঘ্য ৬
        }
    ],
    buttons: [{
        text: 'Login',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {  // ফর্ম ভ্যালিডেশন চেক
                Ext.Msg.alert('Success', 'Form is valid');
            } else {
                Ext.Msg.alert('Error', 'Please fill all the required fields');
            }
        }
    }]
});

এখানে:

  • allowBlank: false: ব্যবহারকারী অবশ্যই একটি মান ইনপুট করতে হবে।
  • minLength এবং maxLength: ইনপুটের দৈর্ঘ্য নির্ধারণ করা।
  • vtype: 'email': ইমেইল ইনপুটের জন্য একটি বিল্ট-ইন ভ্যালিডেশন।
  • isValid(): ফর্মের সব ফিল্ড ভ্যালিড কিনা তা চেক করে।

Custom Validation:

আপনি যদি একটি কাস্টম ভ্যালিডেশন যুক্ত করতে চান, তাহলে validator প্রপার্টি ব্যবহার করতে পারেন।

{
    xtype: 'textfield',
    fieldLabel: 'Age',
    name: 'age',
    validator: function(value) {
        if (value < 18) {
            return 'You must be at least 18 years old';
        }
        return true;
    }
}

২. Server-side Validation

Server-side validation হল ইনপুট যাচাই করার প্রক্রিয়া যা সার্ভারে চলে, যেখানে ব্যবহারকারীর ইনপুট সার্ভারে পাঠানো হয় এবং সেখানে যাচাই করা হয়। এটি নিরাপত্তার জন্য গুরুত্বপূর্ণ, কারণ ক্লায়েন্ট সাইড ভ্যালিডেশন সহজে বাইপাস করা যায় এবং এটি ডেটার ইন্টিগ্রিটি রক্ষা করে।

Server-side Validation প্রক্রিয়া:

  1. Client-side Validation: ব্যবহারকারী প্রথমে ফর্ম ইনপুট করে।
  2. Ajax Request: ফর্ম ডেটা সার্ভারে পাঠানো হয় Ajax রিকোয়েস্ট এর মাধ্যমে।
  3. Server-side Validation: সার্ভার ডেটা যাচাই করে এবং যদি সব ঠিক থাকে, সফল রেসপন্স পাঠানো হয়।
  4. Response: ক্লায়েন্টে সফল বা ব্যর্থতার মেসেজ রিটার্ন করা হয়।

Server-side Validation এর উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'Login Form',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false
        },
        {
            xtype: 'textfield',
            name: 'password',
            fieldLabel: 'Password',
            inputType: 'password',
            allowBlank: false
        }
    ],
    buttons: [{
        text: 'Login',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                // Ajax রিকোয়েস্ট সার্ভারে পাঠানো
                Ext.Ajax.request({
                    url: 'validateLogin.php',  // সার্ভার সাইড স্ক্রিপ্ট
                    method: 'POST',
                    params: form.getValues(),
                    success: function(response) {
                        var result = Ext.decode(response.responseText);
                        if (result.success) {
                            Ext.Msg.alert('Success', 'Login successful');
                        } else {
                            Ext.Msg.alert('Failure', 'Invalid username or password');
                        }
                    },
                    failure: function() {
                        Ext.Msg.alert('Error', 'Server error');
                    }
                });
            }
        }
    }]
});

এখানে:

  • Ext.Ajax.request ব্যবহার করা হয়েছে সার্ভারের সাথে যোগাযোগ করার জন্য।
  • সার্ভারে validateLogin.php ফাইলকে POST রিকোয়েস্ট পাঠানো হচ্ছে।
  • সার্ভার থেকে পাওয়া রেসপন্সের ভিত্তিতে সফল বা ব্যর্থতার মেসেজ প্রদর্শন করা হচ্ছে।

PHP (Server-side) Validation উদাহরণ:

<?php
// validateLogin.php
$username = $_POST['username'];
$password = $_POST['password'];

// ডাটাবেস চেক বা অন্যান্য সার্ভার সাইড ভ্যালিডেশন
if ($username == 'admin' && $password == 'password') {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}
?>

এখানে:

  • সার্ভারে $_POST দিয়ে ইনপুট ডেটা গ্রহন করা হচ্ছে এবং যাচাই করা হচ্ছে।
  • সার্ভারের রেসপন্স JSON ফরম্যাটে ফেরত পাঠানো হচ্ছে, যা ক্লায়েন্টে Ajax রিকোয়েস্টের মাধ্যমে প্রাপ্ত হচ্ছে।

সারাংশ

  1. Client-side Validation:
    • ফর্মের ইনপুট ক্লায়েন্ট সাইডে যাচাই করা হয়।
    • দ্রুত প্রতিক্রিয়া এবং ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।
    • সিকিউরিটি জন্য আদর্শ নয়, কারণ ব্যবহারকারী কোডটি বাইপাস করতে পারে।
  2. Server-side Validation:
    • ইনপুট ডেটা সার্ভারে যাচাই করা হয়।
    • নিরাপত্তার জন্য অপরিহার্য, কারণ এটি ব্যবহারকারীর ইনপুটকে সঠিকভাবে যাচাই করে।
    • ক্লায়েন্ট সাইড ভ্যালিডেশন বাইপাস করেও ব্যবহারকারী ডেটা প্রেরণ করতে পারে, তাই এটি সুরক্ষা বাড়ায়।

Client-side validation দ্রুত ইউজার ইন্টারঅ্যাকশন এবং ব্যাচালর চেকিং এর জন্য ব্যবহৃত হয়, এবং Server-side validation ডেটার নিরাপত্তা এবং ইনটিগ্রিটি নিশ্চিত করে।

Content added By

Custom Form Validation Rules তৈরি করা

ExtJS তে Custom Form Validation Rules তৈরি করা একটি সাধারণ প্রক্রিয়া, যা আপনাকে আপনার ফর্ম ফিল্ডের জন্য নির্দিষ্ট শর্ত তৈরি করতে সাহায্য করে। এই কাস্টম ভ্যালিডেশনগুলি ফর্ম ডেটা যাচাই করার সময় ব্যবহার করা হয় এবং এটি সাধারণত validator ফাংশন বা asyncValidator ফাংশন ব্যবহার করে সম্পন্ন করা হয়।


কাস্টম ভ্যালিডেশন তৈরির জন্য উপাদানগুলি:

  1. validator: সিঙ্ক্রোনাস (synchronous) ভ্যালিডেশন এর জন্য ব্যবহার করা হয়। এটি একটি ফাংশন যা ডেটার ভিত্তিতে ফিল্ডটি বৈধ কিনা চেক করে।
  2. asyncValidator: অ্যাসিঙ্ক্রোনাস (asynchronous) ভ্যালিডেশন, যা কলব্যাক ফাংশন ব্যবহার করে কাজ করে এবং প্রায়ই সার্ভার সাইড যাচাইয়ের জন্য ব্যবহার করা হয়।

১. সিঙ্ক্রোনাস কাস্টম ভ্যালিডেশন

সিঙ্ক্রোনাস ভ্যালিডেশন ফাংশন সাধারণত validator প্রপার্টির মধ্যে লেখা হয় এবং এটি ফিল্ডের ইনপুট ডেটা যাচাই করে। যদি ইনপুটটি বৈধ না হয়, এটি একটি ত্রুটি বার্তা ফিরিয়ে দেয়।

উদাহরণ: নামের দৈর্ঘ্য চেক করা

ধরা যাক, আমরা একটি ফিল্ড তৈরি করতে চাই যেখানে ব্যবহারকারীর নাম কমপক্ষে ৫ অক্ষরের হতে হবে।

Ext.create('Ext.form.Panel', {
    title: 'User Form',
    width: 300,
    bodyPadding: 10,
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: 'Username',
        allowBlank: false,  // এই ফিল্ডটি খালি রাখা যাবে না
        validator: function(value) {
            if (value.length < 5) {
                return 'Username must be at least 5 characters long';
            }
            return true; // এটি বৈধ হলে 'true' ফেরত দেয়
        }
    }, {
        xtype: 'button',
        text: 'Submit',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                Ext.Msg.alert('Success', 'Form is valid');
            } else {
                Ext.Msg.alert('Failure', 'Form is invalid');
            }
        }
    }],
    renderTo: Ext.getBody()
});

এখানে:

  • validator ফাংশনটি ব্যবহার করা হয়েছে যাতে ফিল্ডের ইনপুট যাচাই করা যায়। যদি নামের দৈর্ঘ্য ৫ অক্ষরের কম হয়, তবে একটি ত্রুটি বার্তা প্রদর্শিত হবে।

২. অ্যাসিঙ্ক্রোনাস কাস্টম ভ্যালিডেশন

অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন সাধারণত সার্ভার সাইড যাচাই করার জন্য ব্যবহৃত হয়, যেখানে একটি ফাংশন ব্যবহারকারীকে একটি সার্ভারে পাঠাতে এবং তার ফলাফল ফেরত পেতে পারে।

উদাহরণ: ইউজারনেমের ইউনিকনেস চেক করা (সার্ভার সাইড)

ধরা যাক, আমাদের একটি ইউজারনেম ফিল্ড রয়েছে, যেখানে আমাদের সার্ভার চেক করতে হবে যে এটি আগে নিবন্ধিত হয়েছে কিনা।

Ext.create('Ext.form.Panel', {
    title: 'User Form',
    width: 300,
    bodyPadding: 10,
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: 'Username',
        allowBlank: false,
        validator: function(value) {
            // এটি অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন, কলব্যাক ফাংশন ব্যবহার করে
            var result = false;
            Ext.Ajax.request({
                url: '/check-username',  // সার্ভার API
                params: { username: value },
                async: false,
                success: function(response) {
                    var data = Ext.decode(response.responseText);
                    if (data.exists) {
                        result = 'Username already exists';
                    } else {
                        result = true;
                    }
                },
                failure: function() {
                    result = 'Server error';
                }
            });
            return result;
        }
    }, {
        xtype: 'button',
        text: 'Submit',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                Ext.Msg.alert('Success', 'Form is valid');
            } else {
                Ext.Msg.alert('Failure', 'Form is invalid');
            }
        }
    }],
    renderTo: Ext.getBody()
});

এখানে:

  • async: false সেট করা হয়েছে যাতে Ext.Ajax.request সার্ভারের সঙ্গে যোগাযোগ করার পর সিঙ্ক্রোনাস ভ্যালিডেশন শেষে তার ফলাফল ফেরত দেয়।
  • যদি ইউজারনেমের জন্য সেরা ফলাফল পাওয়া না যায়, তবে এটি ত্রুটি বার্তা দেখাবে, অন্যথায় এটি 'সঠিক' বা 'ভাল' হিসেবে দেখাবে।

৩. ভ্যালিডেটরের অন্যান্য উদাহরণ

ইমেইল ভ্যালিডেশন:

validator: function(value) {
    var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    if (!emailRegex.test(value)) {
        return 'Please enter a valid email address';
    }
    return true;
}

ফোন নম্বর ভ্যালিডেশন:

validator: function(value) {
    var phoneRegex = /^[0-9]{10}$/;
    if (!phoneRegex.test(value)) {
        return 'Phone number must be 10 digits';
    }
    return true;
}

৪. ফর্মের পুরো ভ্যালিডেশন

ফর্মের পুরো ভ্যালিডেশন চালাতে, আপনি form.isValid() ব্যবহার করতে পারেন যা সমস্ত ফিল্ডের জন্য কাস্টম ভ্যালিডেশন চেক করবে।

var form = this.up('form').getForm();
if (form.isValid()) {
    // ফর্ম সঠিক হলে, সার্ভারে পাঠান বা প্রয়োজনীয় কার্যকলাপ করুন
    console.log('Form is valid!');
} else {
    console.log('Form is invalid!');
}

সারাংশ

  • Custom Form Validation: কাস্টম ভ্যালিডেশন ফাংশন ব্যবহার করে আপনি আপনার ফর্ম ফিল্ডের জন্য নির্দিষ্ট শর্ত তৈরি করতে পারেন।
  • validator: সিঙ্ক্রোনাস ভ্যালিডেশন জন্য ব্যবহৃত হয়, যেখানে ডেটা ফিল্ডের ইনপুট যাচাই করা হয়।
  • asyncValidator: অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন যা সার্ভার সাইড যাচাইয়ের জন্য ব্যবহৃত হয়।
  • form.isValid(): পুরো ফর্মের ভ্যালিডেশন চেক করার জন্য ব্যবহৃত হয়।

এটি আপনার ফর্মের ডেটা যাচাই এবং ব্যবহারকারীদের জন্য সঠিক ইনপুট নিশ্চিত করতে সহায়ক।

Content added By
Promotion